<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blend {
            min-height: 400px;
            background-image: url(https://img0.baidu.com/it/u=1188128476,2692382549&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500), url(https://img0.baidu.com/it/u=1188128476,2692382549&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
            background-size: cover;
            background-repeat: no-repeat;
            /* 为每张图设置不同的起始位置 */
            background-position: -30vw, 30vw;
            /* 混合模式 */
            background-blend-mode: multiply;
        }
        .soft-light {
            min-height: 400px;
            background-image: url(https://img.tukuppt.com/png_preview/00/36/52/fqInKiDYIn.jpg%21/fw/780), url(https://img0.baidu.com/it/u=1188128476,2692382549&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
            background-size: 200px, cover;
            background-repeat: repeat, no-repeat;
            background-position: center, center;
            background-blend-mode: soft-light;
        }
        .one-color {
            min-height: 400px;
            background-image: url(https://img0.baidu.com/it/u=1188128476,2692382549&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
            background-color: #148;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-blend-mode: luminosity;
        }
        .label-mix {
            background-image: url(https://img0.baidu.com/it/u=1188128476,2692382549&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
            background-size: cover;
            background-position: center;
            padding: 5em 0 10em;
        }

        .label-mix > h1 {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 6rem;
            text-align: center;
            /* 使用强光混合模式 */
            mix-blend-mode: hard-light;
            background-color: #c33;
            color: #808080;
            border: .1em solid #ccc;
            border-width: .1em 0;
        }
    </style>
</head>
<body>
    <h5>正片叠底</h5>
    <div class="blend"></div>
    <h5>纹理叠加</h5>
    <div class="soft-light"></div>
    <h5>单色</h5>
    <div class="one-color"></div>
    <h5>标签混合</h5>
    <div class="label-mix">
        <h1>My Title</h1>
    </div>
</body>
</html>